<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dimo-播放器</title>
  <link rel="stylesheet" href="./css/style.css">
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src='https://unpkg.com/axios/dist/axios.min.js'></script>
</head>

<body>
  <div id="main">
    <div class='box'>
      <div class='title'>
        <h2>Dimo播放器</h2>
        <input type="text" class='ipt' @keyup.enter='searchMusic' v-model='query' placeholder="请输入歌曲名称">
        <span class='btn' @click='searchMusic'>
          <svg t="1614927211019" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="2195" width="25" height="25">
            <path
              d="M870.5 827.4L682.8 639.7c45-55.4 69.5-124 69.5-196.4 0-83.5-32.5-161.9-91.5-220.9s-137.5-91.5-221-91.5-161.9 32.5-220.9 91.5-91.5 137.4-91.5 220.9 32.5 161.9 91.5 220.9 137.4 91.5 220.9 91.5c73.6 0 143.3-25.3 199.2-71.8l187.5 187.5c12.1 12.1 31.9 12.1 44 0 12.1-12 12.1-31.8 0-44zM439.8 693.6c-137.9 0-250.1-112.2-250.1-250.1s112.2-250.2 250.1-250.2 250.1 112.2 250.1 250.1-112 250.2-250.1 250.2z"
              p-id="2196" fill="#7c1823"></path>
          </svg>
        </span>
      </div>
      <div class='info'>
        <ul class='list'>
          <li class='music'>
            <div class='hidebox'>
              <ul class='music_list'>
                <li v-for='(item,index) in musicList'>
                  <svg @click='playMusic(item.id)' t="1614906408659" class="icon" viewBox="0 0 1083 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="2149" width="20" height="20">
                    <path
                      d="M513.671833 1024c-69.10382 0-136.166353-13.544078-199.301104-40.24526-60.967699-25.791794-115.72447-62.699406-162.732094-109.716704S67.70405 772.27364 41.912256 711.296267c-26.701182-63.134751-40.24526-130.197285-40.24526-199.301104s13.544078-136.166353 40.24526-199.301105c25.791794-60.967699 62.699406-115.72447 109.716704-162.732094S253.393356 66.037053 314.370729 40.24526c63.144425-26.701182 130.197285-40.24526 199.301104-40.24526s136.166353 13.544078 199.301105 40.24526C773.940637 66.037053 828.697408 102.944665 875.705032 149.961964s83.92491 101.764396 109.716705 162.732094c26.701182 63.144425 40.24526 130.197285 40.245259 199.301105s-13.544078 136.166353-40.245259 199.301104c-25.791794 60.967699-62.699406 115.72447-109.716705 162.732095S773.940637 957.962947 712.972938 983.75474c-63.144425 26.701182-130.197285 40.24526-199.301105 40.24526z m0-967.888821c-251.378083 0-455.883983 204.5059-455.883983 455.883984 0 251.378083 204.5059 455.883983 455.883983 455.883983C765.049917 967.888821 969.555817 763.373246 969.555817 511.995163c0-251.378083-204.5059-455.883983-455.883984-455.883984z"
                      p-id="2150" fill="#d81e06"></path>
                    <path d="M746.533228 511.995163L397.231462 250.023676v523.952648z" p-id="2151" fill="#d81e06">
                    </path>
                  </svg>
                  <span class="music_name">
                    {{item.name}}
                  </span>
                  <span class='video_play' v-if='item.mvid!=0' @click='playmv(item.mvid)'>
                    <svg t="1614907296496" class="icon" viewBox="0 0 1024 1024" version="1.1"
                      xmlns="http://www.w3.org/2000/svg" p-id="2776" width="20" height="20">
                      <path
                        d="M663.7 586.7L437 456.3c-6.1-3.4-13.6-5.4-20.4-5.4h-0.7c-10.9 0-20.4 4.8-28.5 12.2-7.5 7.5-12.2 18.3-12.2 29.2l1.4 239c0 6.1 1.4 12.2 4.1 17.7 6.8 14.3 21 23.1 37.3 23.1 6.1 0 12.2-1.4 17.7-4.1L661 658.6c7.5-3.4 13.6-9.5 17.7-16.3 5.4-9.5 6.8-20.4 4.1-31.2-2.8-10.2-9.6-19-19.1-24.4zM438.3 698l-0.7-169 160.2 92.3L438.3 698z"
                        p-id="2777" fill="#d81e06"></path>
                      <path
                        d="M860.6 216.7H720.8l60.4-120.8 0.7-1.4c6.8-14.9 0-32.6-14.3-40.1-4.1-2-8.8-3.4-14.3-3.4-11.5 0-22.4 6.8-27.8 17l-74.7 148.7H377.9L299.8 63.9c-5.4-10.9-16.3-17-27.8-17-4.8 0-9.5 1.4-13.6 3.4-15.6 7.5-21.7 26.5-13.6 41.4l63.8 124.9h-146c-83.4 0.1-150.6 68-150.6 150.8v458.9C12 909.8 79.9 977 162.7 977h698.6c83.5 0 150.7-67.9 150.7-150.7V367.4c-0.7-82.8-67.9-150.7-151.4-150.7zM949.5 827c0 48.9-40.1 88.9-88.9 88.9H162c-48.9 0-88.9-40.1-88.9-88.9V367.4c0-48.9 40.1-88.9 88.9-88.9h698.5c48.9 0 88.9 40.1 88.9 88.9l0.1 459.6z"
                        p-id="2778" fill="#d81e06"></path>
                    </svg>
                  </span>
                </li>
              </ul>
            </div>
          </li>
          <li class='img'>
            <div class='img_box'>
              <img src="./img/player_bar.3b9b552.png" alt="" class='player' :class='{play:isPlay}'>
              <img src="./img/disc.e89e0c3.png" alt="" class='disc ' :class='{playing:isPlay}'>
              <img alt="" class='music_img' :src='musicImg'>
              <p class='music_title'>{{musicname}}</p>
              <p class='m_name'>{{name}}</p>
            </div>
          </li>
          <li class='comment'>
            <div class='comment_box'>
              <h2>热门评论</h2>
              <div class='comment_div'>
                <ul v-for='item in hotComments'>
                  <img :src="item.user.avatarUrl" alt="" class='user_img'>
                  <li class='user_name'>{{item.user.nickname}}</li>
                  <li class='user_info'>{{item.content}}</li>
                </ul>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class='control'>
        <audio data-v-175d0d9d="" :src='musicSrc' controls="controls" autoplay="autoplay" loop="loop" class="myaudio"
          @play='play' @pause='pause'></audio>
      </div>
    </div>
    <div class='video' v-show='isShow' style="display: none;" @click='clickbox'>
      <video :src="mvSrc" controls></video>
    </div>
  </div>

  <script src='./js/javascript.js'></script>

</body>

</html>